<template>
    <div>
<div class="tabs">
    <el-tabs v-model="activeName" @tab-click="handleClick">
     <div > <el-tab-pane  label="客户统计" name="first">
        <MyCustomer v-if="activeName === 'first'" />
      </el-tab-pane></div>
      <el-tab-pane label="销售统计" name="second">
        <MySales v-if="activeName === 'second'" />
      </el-tab-pane>
      <el-tab-pane label="线索统计" name="third">
        <MyClue v-if="activeName === 'third'" />
      </el-tab-pane>
      <el-tab-pane label="渠道统计" name="fourth">
        <MyChannel v-if="activeName === 'fourth'" />
      </el-tab-pane>
    </el-tabs>
</div>
</div>

</template>
  

  <script  setup>
  import { ref } from 'vue'
import MyCustomer from "./tool/MyCustomer.vue";
import MySales from "./tool/MySales.vue";
import MyClue from "./tool/MyClue.vue";
import MyChannel from "./tool/MyChannels.vue";
  const activeName=ref('first')
  
 const handleClick=(tab,)=>{
    // console.log(tab, event);
    activeName.value=tab.props.name
    // console.log(activeName.value);
}


  </script>
  <style scoped lang="less">
  .tabs{
  
    background-color: #ffff;
    height: 100vh;
  }
  </style>
  